@import './com';

header{
       .h_top{
           position: relative;
           width: vw(750);
           height: vw(124);

        // 头部内容
           >ul{
               position: absolute;
               top: vw(50);
               left: vw(23);
               font-size: vw(26);
               
               
               width: vw(705);
               height: vw(57);
               @extend .flex;
               align-items: center;
               
               >li:first-of-type{
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   width: vw(123);
                   height: vw(57);
                   border: vw(1) solid $col;
                   border-radius: vw(20);
               }
            //    地区
               >li:last-of-type{
                   position: relative;


                   >select{
                    width: vw(160);
                    height: vw(60);
                   border:vw(1) solid $col;
                   box-sizing: border-box;
                   -webkit-appearance: none;//去除下拉箭头
                   font-size: vw(26);
                   text-indent: vw(17);//首行缩进
    
                
                }
                  >i{
                       position: absolute;
                       top: 50%;
                       margin-top: vw(-7.5);
                       margin-right: vw(16);
                       right: 0;
                       width: 0;
                       height: 0;
                       border: vw(15) solid transparent;
                       border-top:vw(15) solid $col ;
                       //穿透
                       pointer-events: none;
    
                   }
               }
           }

       }

              .h_bt{
                  position: relative;
                  width: vw(750);
                  height: vw(217);
                  
                .car{
                    height: vw(183);

                    display: flex;
                    justify-content: space-evenly;
                      >p{
                          display: flex;
                          flex-direction: column;
                          font-size: vw(26);

                         justify-content: center;
                          width: vw(150);
                          height: vw(183);

                          >span{
                              text-align: center;
                          }
                          >img{
                              width: vw(150);
                          }
                      }
                  }

                  .dots{
                      position: absolute;
                      bottom: 0;
                      left: 50%;
                      margin-left: vw(-50);
                      width: vw(100);
                      height: vw(20);
                      @extend .flex;
                  
                      >span{
                        width: vw(20);
                        height: vw(20);
                        border-radius: 50%;
                        background-color: #ffc9a1;
                      }
                      .dots_active{
                          background-color: $col;
                      }
                   
                  }
              
              }
}


main {
    // 美食
   .fine{
      display: flex;
      flex-direction: column;
      align-items: center;
       width: vw(750);
       height: vw(270);

       .title{
           width: vw(705);
           height: vw(65);
           @extend .flex;

           >p{

            >img{
                width: vw(58);
                height: vw(45);
                vertical-align: middle;
            }
           }
           >p:first-of-type{
               font-size: vw(30);
               margin-top: vw(19);
           }
           >p:last-of-type{
                font-size: vw(24);
               margin-top: vw(25);
               >span{
                   margin-right: vw(5);
               }

                >img{
                    width: vw(24);
                    height: vw(24);
                    vertical-align: middle;

                }
           }
       }
       .picture{
           width: vw(705);
           height: vw(206);
           @extend .flex;
           align-items: center;
           >img{
               width: vw(133);
              height: vw(133);
           }
       }
   }
  

//    运动
.run{
    display: flex;
    flex-direction: column;
    align-items: center;
     width: vw(750);
     height: vw(292);

     .title{
         width: vw(705);
         height: vw(75);
         @extend .flex;

         >p{

          >img{
              width: vw(48);
              height: vw(60);
              vertical-align: middle;
          }
         }
         >p:first-of-type{
             font-size: vw(30);
             margin-top: vw(19);
         }
         >p:last-of-type{
              font-size: vw(24);
             margin-top: vw(25);
             >span{
                 margin-right: vw(5);
             }

              >img{
                  width: vw(24);
                  height: vw(24);
                  vertical-align: middle;
              }
         }
     }
     .picture{
         width: vw(705);
         height: vw(206);
         @extend .flex;
         align-items: center;
         >img{
             width: vw(133);
            height: vw(133);
         }
     }
 }

//  电影
.film{
    display: flex;
    flex-direction: column;
    align-items: center;
     width: vw(750);
     height: vw(329);

     .title{
         width: vw(705);
         height: vw(82);
         @extend .flex;

         >p{

          >img{
              width: vw(58);
              height: vw(45);
              vertical-align: middle;
          }
         }
         >p:first-of-type{
             font-size: vw(30);
             margin-top: vw(19);
         }
         >p:last-of-type{
              font-size: vw(24);
             margin-top: vw(25);
             >span{
                 margin-right: vw(5);
             }

              >img{
                  width: vw(24);
                  height: vw(24);
                  vertical-align: middle;

              }
         }
     }
     .picture{
         width: vw(705);
         height: vw(248);
         @extend .flex;
         >img{
          position: relative;
          top: vw(45);
             width: vw(133);
            height: vw(133);
         }
     }
 }
   }


   // 底部导航栏
   nav{

    @extend .sticky;

    >.bt{
        width: vw(750);
        height: vw(135);
        display: flex;
        justify-content: space-around;
    
        >p{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: vw(73);
            font-size: vw(26);
            img{
                width: vw(73);
                height: vw(73);
            }
            span{
                display: flex;
                justify-content: center;
            }
            
        }
    }
   
}